<template>
    <view :class="is_staff == 1 ? 'worker' : 'noworker'" :style="{ '--color': color }">
        <status-bar title="我的订单" :back="back" :goHome="fromShare"></status-bar>

        <view class="List" v-for="(item, index) in pageData" :key="index" v-if="pageData.length">
            <text class="serial" v-if="item.smart_locker">{{ item.smart_locker.posno }}</text>
            <view class="Cabinet">
                <image :src="$imgUrls(item.logo)" mode="aspectFill" @click="$common.previewSingle(item.logo)" v-if="item.logo" class="CabinetLogo f-shrink-0"></image>
                <view class="Cabinet_Info" v-if="item.smart_locker">
                    <text class="ellipsis title">{{ item.smart_locker.devno_name }}</text>
                    <text class="color_66 size24 ellipsis_2">{{ item.smart_locker.address }}</text>
                </view>
            </view>

            <text class="black size32 m-top16" user-select>{{ item.union_order_code }}</text>

            <view class="d-flex a-center m-top10">
                <text class="color_66 size28">{{ item.uname }}</text>
                <text class="color_66 size28 m-left20" @click.stop="$common.Tel(item.utel)">{{ item.utel }}</text>
            </view>
            <text class="color_66 size28 m-top4" v-if="item.address">{{ item.address }}</text>

            <view class="merchandise" v-if="!item.goodsData">
                <image :src="$imgUrls(item.goods_img)" v-if="item.goods_img" @click="$common.previewSingle(item.goods_img)" mode="aspectFill" class="merImg"></image>

                <view class="merBox">
                    <text class="merTile ellipsis">{{ item.goods_name }}</text>
                    <text class="color_99 size26">{{ item.specs_bind_text }}</text>
                    <text class="color_99 size26" v-if="item.add_time_str">下单：{{ item.add_time_str }}</text>
                </view>

                <view class="priceNum">
                    <view class="d-flex a-center color_ff4">
                        <text class="size22 m-top8">￥</text>
                        <text class="size36 bold500">{{ item.price }}</text>
                    </view>
                    <text class="color_99 size26" v-if="item.goods_num">共{{ item.goods_num }}件</text>
                </view>
            </view>

            <block v-else>
                <view class="merchandise" v-for="(subItem, subIndex) in item.goodsData" :key="subIndex">
                    <image :src="$imgUrls(subItem.goods_img)" v-if="subItem.goods_img" @click="$common.previewSingle(subItem.goods_img)" mode="aspectFill" class="merImg"></image>

                    <view class="merBox">
                        <text class="merTile ellipsis">{{ subItem.goods_name }}</text>
                        <text class="color_99 size26">{{ subItem.specs_bind_text }}</text>
                        <text class="color_99 size26" v-if="item.add_time_str">下单：{{ item.add_time_str }}</text>
                    </view>

                    <view class="priceNum">
                        <view class="d-flex a-center color_ff4">
                            <text class="size22 m-top8">￥</text>
                            <text class="size36 bold500">{{ subItem.price }}</text>
                        </view>
                        <text class="color_99 size26" v-if="subItem.goods_num">共{{ subItem.goods_num }}件</text>
                    </view>
                </view>
            </block>

            <view class="takeFood" @click.stop="openCabinet(item)">开柜取餐</view>
        </view>

        <emptys title="暂无相关内容" v-if="!pageData.length"></emptys>

        <view class="footer" v-if="is_staff == 1">
            <view class="Locker">
                <view class="Locbox" @click="scanCode">
                    <view class="iconfont icon-saoyisao size34 white"></view>
                    <text class="white size34 m-left16 bold500">扫码存餐</text>
                </view>
            </view>
        </view>

        <showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                showModal: false,
                pageData: [],
                fromShare: 0,
                is_staff: 0,
                devno: '' // 8005693
            };
        },
        onLoad(opt) {
            if (!this.vid) this.showModal = true;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            if (opt.devno) this.devno = opt.devno;
        },
        onShow() {
            this.newOrderList();
        },
        methods: {
            newOrderList() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/newOrderList',
                        data: {
                            devno: this.devno,
                            state: 666
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.is_staff = res.is_staff;
                        this.pageData = result;
                    });
            },
            async openCabinet(item) {
                const smart_locker = item.smart_locker;
                const result = await this.$Modals('开柜取餐', `是否确定开启 ${smart_locker.posno} 柜？`);
                if (!result) return;
                this.pickup(item);
            },
            pickup(item) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SmartLockerApi/pickup',
                        data: {
                            order_code: item.order_code
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.newOrderList();
                    });
            },
            scanCode() {
                uni.scanCode({
                    success: (res) => {
                        const order_code = res.result;
                        this.toUrl(`orderDetails?order_code=${order_code}&devno=${this.devno}`);
                        console.log(res, 'res');
                    },
                    fail: (err) => {}
                });
            },
            closeModel() {
                this.showModal = false;
                this.newOrderList();
            }
        },
        computed: {
            ...mapState(['color', 'vid'])
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .worker {
        padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
    }
    .noworker {
        padding-bottom: 30rpx;
        // padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    }
    .List {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        margin: 24rpx auto 0;
        display: flex;
        flex-direction: column;
        position: relative;
        .serial {
            color: #000;
            font-weight: bold;
            font-size: 52rpx;
            position: absolute;
            top: 20rpx;
            right: 20rpx;
        }
        .Cabinet {
            width: 500rpx;
            display: flex;

            .CabinetLogo {
                width: 80rpx;
                height: 80rpx;
                border-radius: 6rpx;
                margin-right: 20rpx;
            }
            .Cabinet_Info {
                display: flex;
                flex-direction: column;
                min-height: 80rpx;
                .title {
                    color: #000;
                    font-size: 32rpx;
                    font-weight: 500;
                }
            }
        }
        .merchandise {
            width: 100%;
            margin-top: 24rpx;
            display: flex;
            .merImg {
                width: 150rpx;
                height: 150rpx;
                border-radius: 6rpx;
                margin-right: 20rpx;
            }
            .merBox {
                flex: 1;
                height: 150rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .merTile {
                    color: #333;
                    font-size: 30rpx;
                }
            }
            .priceNum {
                height: 150rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-left: 10rpx;
            }
        }

        .takeFood {
            width: 100%;
            height: 80rpx;
            margin: 40rpx auto 10rpx;
            background-color: var(--color);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 32rpx;
            border-radius: 10rpx;
            font-weight: 500;
        }
    }

    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        .Locker {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            .Locbox {
                width: 690rpx;
                height: 88rpx;
                margin: 0 auto;
                background-color: #000;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
            }
        }
    }
</style>
